<template>
	<view>
		<cu-custom bgColor="bg-cyan" isBack>
			<block slot="content">slider 滑块选择器</block>
		</cu-custom>
		<view class="smart-padding-wrap">
			<view class="text">普通选择器</view>
			<view>
				<slider @change="sliderChange" value="50" show-value />
			</view>
			<view class="uni-title">设置步进step跳动</view>
			<view class=""></view>
			<view>
				<slider step="5" @change="sliderChange" value="60" show-value />
			</view>
			<view class="uni-title">设置最大值 最小值</view>
			<view>
				<slider min="50" max="200" @change="sliderChange" value="60" show-value />
			</view>
			<view class="uni-title">不同颜色和大小的滑块</view>
			<view>
				<slider @change="sliderChange" value="50" activeColor="#FFCC33" backgroundColor="#000000" block-color="#8A6DE9" block-size="20" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		methods:{
			sliderChange(e){
				console.log(e.detail.value);
			}
		}
	}
</script>

<style>
</style>
